<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Tuning PID Controller</title>
  <script type="text/javascript" src="../../highlight.pack.js"></script>
  <script type="text/javascript" src="../../highlightCode.js"></script>
  <link href='../../highlight.css' rel='stylesheet' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../d3.v4.min.js"></script>

</head>
<body style='padding:10px;font-family:arial'>
<center>
<b>Tuning PID Controller</b>
<p></p>
<table><tr>
<td style=width:400px;>
<div style="padding:10px;width:400px;text-align:justify;height:430px;overflow-y:auto">

The central monitoring panel can tune the PID loop. It  displays and has access to adjust the following values associated with the controller: <br>
1.) Controller Setpoint(SP) - When this radio button is checked it the  setpoint is available for change. <br>
2.) Proportional(P) Value - When this radio button is checked the value is available for change. <br>
3.) Intergral(I) Value (repeats/minute) - When the checkbox is un-checked the integral is is ignored. When the radio button is checked the value is available for change.<br>
4.) Derivative(D) Value - When the checkbox is un-checked the derivative value is ignored. When the radio button is checked the value is available for change.<br>
5.) Output(CO): 0 to 100% - When this radio button is checked it overrides the controller output (CO) and selects a manual mode.  <br>
<br>Choose the radio button for desired value to adjust. Select the increment, then use the <img src="../Images/minusRound.png" width=20 height=20 /> or <img src="../Images/plusRound.png" width=20 height=20 /> button to change value.


</div>
</td>
<td style=width:400px; valign=top>
<div id="svgDiv" style='border:1px solid black;width:400px;height:400px;'>
<svg id=mySVG width=400 height=400>

<!--Controller Body-->
<g id=PIDG transform="translate(200,200)">
<ellipse  id="pidEllipse" fill="Turquoise" stroke="teal"  stroke-width="4" cx="0" cy="0" rx="152" ry="64"/>
 <foreignObject id=foAdjust width=300 height=100 x=-130 y=-50>
<table cellpadding=0>
<tr><td align=center colspan=5>Tune Controller:<input type="checkbox" id=adjustControllerCheck onClick=adjustControllerChecked() /></td></tr>
    <tr align=center>
    <td>SP:<input  disabled style="margin-right: 0px;margin-left: 0px;"  type="radio" name=tuneRadio id=tuneSPClick onClick=tuneSPClicked() /></td>
    <td>P:<input style="margin-right: 0px;margin-left: 0px;"   disabled  type="radio" name=tuneRadio  id=tunePClick onClick=tunePClicked()   /></td>
    <td>I:<input disabled title="turn off Integral" onClick=turnOffIntegralChecked() id=turnOffIntegralCheck type="checkbox" checked style="margin-right: 0px;margin-left: 0px;"  /><input style="margin-right: 0px;margin-left: 0px;" disabled  type="radio" name=tuneRadio  id=tuneIClick onClick=tuneIClicked()   /></td>
    <td>D:<input disabled  title="turn off Derivative" onClick=turnOffDerivativeChecked() id=turnOffDerivativeCheck  type="checkbox" checked style="margin-right: 0px;margin-left: 0px;" /><input style="margin-right: 0px;margin-left: 0px;"  disabled  type="radio" name=tuneRadio  id=tuneDClick onClick=tuneDClicked()   /></td>
    <td>CO:<input  disabled type="radio" style="margin-right: 0px;margin-left: 0px;"  name=tuneRadio   id=tuneCOClick onClick=tuneCOClicked()  /></td>
    </tr>
    <tr align=center>
    <td><input onfocus=blur() type="text" style=width:40px id=tuneSPValue value=6.0 /></td>
    <td>&nbsp;&nbsp;<input onfocus=blur()  type="text" style=width:40px  id=tunePValue value=0.5 /></td>
    <td><input onfocus=blur()  type="text" style=width:40px  id=tuneIValue value=0.05 /></td>
    <td><input onfocus=blur()  type="text" style=width:40px  id=tuneDValue value=3 /></td>
    <td>&nbsp;&nbsp;<input onfocus=blur()  type="text" style=width:40px  id=tuneCOValue value=0 /></td>
    </tr>
    <tr><td align=center colspan=5>
        <TABLE >
        <TR>
        <TD><button  onClick=controlAdjust(-1) style=padding:0;width:30px;height:30px><img src="../Images/minusRound.png" alt="" width=25 height=25 /></button></TD>
        <TD>
            <select id=incrementSelect title="Increment value">
              <option value="">.01</option>
              <option value="">.10</option>
              <option value="">.50</option>
              <option selected value="">1.0</option>
              <option value="">5.0</option>
              <option value="">10</option>

            </select>
        </TD>
        <TD><button  onClick=controlAdjust(1) style=padding:0;width:30px;height:30px><img src="../Images/plusRound.png" alt="" width=25 height=25 /></button></TD>
        </TR>
        </TABLE>
    </td></tr>
</table>
</foreignObject>
</g>

</svg>
</div>

</td>
</tr></table>
  <br />SVG Source:
  <div id=svgSourceDiv style=overflow:auto;width:100%;height:1px;text-align:left; /></div>
  Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:100%;text-align:left; /></div><p></p>
</center>

<script id=myScript>
//============================TUNING==================================
function turnOffIntegralChecked()
{
   if(turnOffIntegralCheck.checked)
   {
      tuneIValue.style.background=""
      turnOffIntegralCheck.title="Turn off Integral"
      tuneIClick.disabled=false
   }
   else
   {
      tuneIValue.style.background="gainsboro"
      turnOffIntegralCheck.title="Turn on Integral"
      tuneIClick.checked=false
      tuneIClick.disabled=true
   }
}
function turnOffDerivativeChecked()
{
   if(turnOffDerivativeCheck.checked)
   {
      tuneDValue.style.background=""
      turnOffDerivativeCheck.title="Turn off Derivative"
      tuneDClick.disabled=false
   }
   else
   {
        tuneDValue.style.background="gainsboro"
        turnOffDerivativeCheck.title="Turn on Derivative"
        tuneDClick.checked=false
        tuneDClick.disabled=true
   }
}

function adjustControllerChecked()
{
   if(adjustControllerCheck.checked)
   {
        tuneSPClick.disabled=false
        tunePClick.disabled=false
        tuneIClick.disabled=false
        tuneDClick.disabled=false
        tuneCOClick.disabled=false
        turnOffIntegralCheck.disabled=false
        turnOffDerivativeCheck.disabled=false
   }
   else
   {
        tuneSPClick.checked=false
        tunePClick.checked=false
        tuneIClick.checked=false
        tuneDClick.checked=false
        tuneCOClick.checked=false

        tuneSPClick.disabled=true
        tunePClick.disabled=true
        tuneIClick.disabled=true
        tuneDClick.disabled=true
        tuneCOClick.disabled=true

        turnOffIntegralCheck.disabled=true
        turnOffDerivativeCheck.disabled=true

   }

    tuneSPValue.style.border=""
    tunePValue.style.border=""
    tuneIValue.style.border=""
    tuneDValue.style.border=""
    tuneCOValue.style.border=""

    TuneSelected=null
}
var TuneSelected
function controlAdjust(factor)
{
    var increment=+incrementSelect.options[incrementSelect.selectedIndex].text
    var change=factor*increment

    if(TuneSelected=="SP")
    {
        var spValue=(+tuneSPValue.value)+change
        console.log(spValue)

        tuneSPValue.value=spValue.toFixed(3)
    }
    if(TuneSelected=="P")
    {
        var pValue=(+tunePValue.value)+change
        tunePValue.value=pValue.toFixed(3)
    }
    if(TuneSelected=="I")
    {
        var iValue=(+tuneIValue.value)+change
        tuneIValue.value=iValue.toFixed(3)
    }
    if(TuneSelected=="D")
    {
        var dValue=(+tuneDValue.value)+change
        tuneDValue.value=dValue.toFixed(3)
    }
    if(TuneSelected=="OUT")
    {
        var outValue=(+tuneCOValue.value)+change
        tuneCOValue.value=outValue.toFixed(3)
    }
}

function tuneSPClicked()
{
    tuneSPValue.style.border="2px solid black"
    tunePValue.style.border=""
    tuneIValue.style.border=""
    tuneDValue.style.border=""
    tuneCOValue.style.border=""

        TuneSelected="SP"
}

function tunePClicked()
{
    tuneSPValue.style.border=""
    tunePValue.style.border="2px solid black"
    tuneIValue.style.border=""
    tuneDValue.style.border=""
    tuneCOValue.style.border=""
        TuneSelected="P"
}

function tuneIClicked()
{
    tuneSPValue.style.border=""
    tunePValue.style.border=""
    tuneIValue.style.border="2px solid black"
    tuneDValue.style.border=""
    tuneCOValue.style.border=""
        TuneSelected="I"
}

function tuneDClicked()
{
    tuneSPValue.style.border=""
    tunePValue.style.border=""
    tuneIValue.style.border=""
    tuneDValue.style.border="2px solid black"
    tuneCOValue.style.border=""

        TuneSelected="D"
}

function tuneCOClicked()
{
    tuneSPValue.style.border=""
    tunePValue.style.border=""
    tuneIValue.style.border=""
    tuneDValue.style.border=""
    tuneCOValue.style.border="2px solid black"

        TuneSelected="OUT"
}


</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
   	showSourceSVG()
	showSourceJS()

}


</script>
<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-88028738-1', 'auto');
  ga('send', 'pageview');


</script>

</body>

</html>